import React, { useMemo } from 'react';
import InputArea from './components/inputArea.tsx';
import { FrownOutlined, SmileOutlined, SyncOutlined, TagsOutlined, UserOutlined } from '@ant-design/icons';
import { XStream, Bubble, ThoughtChain, useXAgent } from '@ant-design/x';
import { Button, Flex, Splitter, type GetProp } from 'antd';
import useSSE from './hooks/usesse.ts';
import Operation from './components/operation.tsx';

function AiContent(props: any) {
  return (
    <div style={{ color: 'red' }}>
      { props.children }
    </div>
  )
};

const roles: GetProp<typeof Bubble.List, 'roles'> = {
  ai: {
    placement: 'start',
    avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
  },
  local: {
    placement: 'end',
    avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
  },
};

const Xchat = () => {
  const {
    lines,
    chatList,
    isResponding,
    ssePost,
  } = useSSE([]);

  const request = async (msg: string) => {
    ssePost({
      query: msg,
    });
  }

  const handleRequest = (msg: string) => {
    request(msg)
  }

  const renderChatList = useMemo(() => {
    if (!Array.isArray(chatList) || chatList.length === 0) return [];
    const res = chatList.map(({ id, content, isAnswer }) => ({
      key: id,
      role: isAnswer ? 'ai' : 'local',
      // content这里可以替换成自定义组件
      // messageRender 自定义渲染
      content: <AiContent>{ content }</AiContent>,
      loading: content ? false : true,
      footer: isAnswer && !isResponding ? <Operation /> : null,
    }));
    return res;
  }, [chatList, isResponding]);
  
  return (
    <div>
      <Splitter>
      <Splitter.Panel>
        {/* -------------- Emit -------------- */}
        <InputArea onSend={handleRequest} isResponding={isResponding} />
        {/* -------------- Content Concat -------------- */}
        <Bubble.List
          roles={roles}
          style={{ maxHeight: 300 }}
          items={renderChatList}
        />
      </Splitter.Panel>
      {/* -------------- Log -------------- */}
      {/* <Splitter.Panel style={{ marginLeft: 16 }}>
        <ThoughtChain
          items={
            lines.length
              ? [
                  {
                    title: 'Mock Default Protocol - Log',
                    status: 'success',
                    icon: <TagsOutlined />,
                    content: (
                      <pre style={{ overflow: 'scroll' }}>
                        {lines.map((i, index) => (
                          <div key={index}>{i.data}</div>
                        ))}
                      </pre>
                    ),
                  },
                ]
              : []
          }
        />
      </Splitter.Panel> */}
    </Splitter>
    </div>
  )
}

export default Xchat;
